<template>
  <div class="container">
    <div class="right">
      <div class="top"></div>
      <div>
        <el-button-group style="">
          <el-button size="large" round>多站统计</el-button>
          <el-button size="large" round type="info">单站统计 </el-button>
        </el-button-group>
      </div>
      <div class="item">
        <span>站点名称：</span>
        <div>
          <el-input
            size="large"
            placeholder="请输入站点"
            style="padding-top: 10px"
          >
            <template #append>
              <el-icon color="#409EFC" class="no-inherit" :size="40">
                <CirclePlus />
              </el-icon>
            </template>
          </el-input>
        </div>
        <!-- //时间选择器 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            size="large"
            style="margin-top: 13px"
          />
          <el-button size="large" type="primary" style="margin-left: 40px"
            >搜索</el-button
          >
          <el-button size="large" type="primary" style="margin-right: 40px"
            >导出
          </el-button>
        </div>

        <div class="bottom"></div>
      </div>
      <div>
        <div class="div div1">
          <div class="aa aa1">充电量(KWh)</div>
          <el-table
            :data="tableData1"
            :header-cell-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              color: 'blue',
            }"
            border
            style="width: 100%"
            :row-style="{ height: '48.5px', width: '48.5px' }"
            class="DDD"
          >
            <el-table-column
              fixed
              prop="serialnumber"
              label="序号"
              align="center"
            />
            <el-table-column
              prop="name"
              label="站点名称"
              width="140"
              align="center"
            />
            <el-table-column
              prop="sharpelectricity"
              label="尖电"
              align="center"
            />
            <el-table-column prop="phase" label="峰电" align="center" />
            <el-table-column
              prop="ordinarytelegram"
              label="平电"
              align="center"
            />
            <el-table-column
              prop="valleyelectricity"
              label="谷电"
              align="center"
            />
            <el-table-column
              prop="total"
              label="总计"
              align="center"
              width="130"
            />
          </el-table>
        </div>
        <div class="div div2">
          <div class="aa aa2">放电量(KWh)</div>
          <el-table
            :data="tableData2"
            border="true"
            style="width: 100%"
            :row-style="{ height: '48.5px', width: '48.5px' }"
            :header-cell-style="{
              borderTop: 'none',
              borderLeft: 'none',
              borderRight: 'none',
              // borderBottom: 'none',
              color: 'blue',
            }"
            class="DDD"
          >
            <el-table-column
              prop="sharpelectricity"
              label="尖电"
              align="center"
            />
            <el-table-column prop="phase" label="峰电" align="center" />
            <el-table-column
              prop="ordinarytelegram"
              label="平电"
              align="center"
            />
            <el-table-column
              prop="valleyelectricity"
              label="谷电"
              align="center"
            />
            <el-table-column prop="total" label="总计" align="center" />
          </el-table>
        </div>
        <div class="div div3">
          <div class="aa"></div>
          <el-table
            :data="tableData3"
            border
            style="width: 100%"
            :row-style="{ height: '48.5px', width: '48.5px' }"
            :header-cell-style="{
              borderTop: 'none',
              color: 'blue',
            }"
            class="DDD"
          >
            <el-table-column
              prop="effic"
              label="综合效率"
              width="260"
              align="center"
            />
          </el-table>
        </div>
      </div>
      <el-pagination
        small
        background
        layout="->,prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </div>
  </div>
  <div>
    <el-table
      :data="tableData"
      style="width: 60%; border-top: 1px solid red"
      :row-style="{ height: '50px', width: '60px' }"
      :show-header="false"
      class="DDD"
    >
      <el-table-column fixed prop="serialnumber" label="" width="100" />
      <el-table-column prop="name" label="" width="120" />
      <el-table-column prop="sharpelectricity" label="" width="100" />
      <el-table-column prop="phase" label="" width="100" />
      <el-table-column prop="ordinarytelegram" label="" width="100" />
      <el-table-column prop="valleyelectricity" label="" width="100" />
      <el-table-column prop="total" label="" width="150" />
      <el-table-column fixed prop="serialnumber1" label="" width="100" />
      <el-table-column prop="name1" label="" width="120" />
      <el-table-column prop="sharpelectricity1" label="" width="100" />
      <el-table-column prop="phase1" label="" width="100" />
      <el-table-column prop="ordinarytelegram1" label="" width="100" />
      <el-table-column prop="valleyelectricity1" label="" width="100" />
      <el-table-column prop="total1" label="" width="150" />
    </el-table>
  </div>
</template>

<script>
import { CirclePlus } from "@element-plus/icons-vue";
export default {
  name: "LayoutPage",
  data() {
    return {
      tableData: [
        {
          serialnumber: "",
          name: "总计",
          sharpelectricity: "1.12",
          phase: "12.12",
          ordinarytelegram: "100.12",
          valleyelectricity: "1.12",
          total: "300.34",
        },
      ],
      tableData1: [
        {
          serialnumber: "1",
          name: "津荣储能站1",
          sharpelectricity: "1.12",
          phase: "12.12",
          ordinarytelegram: "100.12",
          valleyelectricity: "1.12",
          total: "300.34",
        },

        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
      ],
      tableData2: [
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
      ],
      tableData3: [
        {
          serialnumber: "99%",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
        {
          serialnumber: "",
          name: "",
          sharpelectricity: "",
          phase: "",
          ordinarytelegram: "",
          valleyelectricity: "",
          total: "",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: auto;
  // background-color: #243340;
  display: flex;
  // position: absolute;

  .right {
    flex: 1;
    // background-color: #243340;

    display: flex;
    flex-direction: column;
    .top {
      height: 1px;
      top: 40px;
      position: relative;
      // background-color: #243340;
    }
    .item {
      font-size: 18px;
      align-items: center;
      display: flex;
      margin: 10px 0;
      // width: 140px;
      // background-color: #243340;
    }
    .bottom {
      flex: 1;
      // background-color: #243340;
    }
    div .div {
      display: inline-block;
      // width: 32%;
      height: 780px;
      margin: 5px;
      // background-color: #243340;
    }
    div .div::after {
      content: "";
      display: block;
      clear: both;
    }
    div .div1 {
      // background-color: #243340;
      width: 43%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
      background: white;
    }

    div .div2 {
      // background-color: #243340;
      width: 43%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
      background: white;
    }
    div .div3 {
      // background-color: #243340;
      width: 10%;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
    }
    .div1,
    .div2,
    .div3 {
      float: left;
      border: 1px solid black;
    }
    .DDD {
      margin-top: 5px;
    }
  }
}
.aa {
  width: 100%;
  height: 20px;
  color: rgb(87, 114, 236);
  padding-top: 2px;
}
.aa1 {
  text-align: center;
}
.aa2 {
  text-align: center;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.no-inherit {
  size: 23px;
}
.el-table--border::before {
  height: 0px;
}
.el-table--border::after {
  width: 0;
}
.el-table--border {
  border: none;
}

// ::v-deep .el-table {
//   .el-table__inner-wrapper::after {
//     height: 0px !important;
//   }
//   }
//   .el-table--border::before {
//   width: 0px;
// }
// .el-table :deep(){
//   .el-table__border-left-patch{
//     width: 0;
// }

::v-deep .el-table {
  .el-table__inner-wrapper::after {
    height: 0px !important;
  }
  //   /deep/  .el-table--border::before {
  //     width: 0;
  // }
}

::v-deep .div {
  &.div2,
  &.div3 {
    .el-table__border-left-patch{
      display: none;
    }

    .el-table tbody tr{
      td:first-child{
        border-left: 1px solid rgb(166, 164, 164);
      }
    }
  }
}
</style>


